.markdown-preview {
  position: relative;
  min-height: 100px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #1890ff;
}

.preview-container {
  line-height: 1.8;
  font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
          sans-serif;
  color: #2c3e50;
  font-size: 16px;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f56565;
  padding: 12px 16px;
  background-color: #fed7d7;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  font-weight: 500;
}

/* 图片模态框样式 */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  backdrop-filter: blur(4px);
}

.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  cursor: default;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 深度选择器样式 */
.preview-container {
  /* 标题样式 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: #1a202c;
  }

  h1 {
    font-size: 2.25em;
    border-bottom: 3px solid #3182ce;
    padding-bottom: 0.5em;
    color: #2d3748;
  }

  h2 {
    font-size: 1.875em;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.3em;
    color: #2d3748;
  }

  h3 {
    font-size: 1.5em;
    color: #2d3748;
  }

  h4 {
    font-size: 1.25em;
    color: #4a5568;
  }

  h5 {
    font-size: 1.125em;
    color: #4a5568;
  }

  h6 {
    font-size: 1em;
    color: #718096;
  }

  /* 段落样式 */
  p {
    margin-bottom: 1.25em;
    line-height: 1.8;
  }

  /* 列表样式 */
  ul,
  ol {
    padding-left: 2em;
    margin-bottom: 1.25em;
  }

  li {
    margin-bottom: 0.5em;
    line-height: 1.6;
  }

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  /* 选择题特殊样式 */
  ul li {
    padding: 12px 16px;
    margin: 8px 0;
    background: #f8fafc;
    border-left: 4px solid #e2e8f0;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  ul li:hover {
    background: #edf2f7;
    border-left-color: #3182ce;
    transform: translateX(4px);
  }

  /* 交互式选择题样式 */
  .quiz-container {
    margin: 2em 0;
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
  }

  .quiz-container.wrong-question {
    border-color: #feb2b2;
    background: #fef2f2;
  }

  .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .quiz-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .quiz-option:hover {
    border-color: #3182ce;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.1);
  }

  .quiz-option.selected {
    border-color: #3182ce;
    background: #edf2f7;
  }

  .quiz-option.correct {
    border-color: #68d391;
    background: #f0fff4;
    color: #22543d;
  }

  .quiz-option.wrong {
    border-color: #fc8181;
    background: #fef5e7;
    color: #c53030;
  }

  .quiz-option.quiz-wrong-question {
    border-left: 4px solid #f56565;
    background: #fef2f2;
  }

  .option-letter {
    width: 32px;
    height: 32px;
    background: #e2e8f0;
    color: #2d3748;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
  }

  .quiz-option.selected .option-letter {
    background: #3182ce;
    color: white;
  }

  .quiz-option.correct .option-letter {
    background: #68d391;
    color: white;
  }

  .quiz-option.wrong .option-letter {
    background: #fc8181;
    color: white;
  }

  .option-text {
    flex: 1;
    font-size: 16px;
  }

  .quiz-result {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    font-weight: 500;
  }

  .result-correct {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #22543d;
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    padding: 12px 16px;
    border-radius: 8px;
  }

  .result-wrong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c53030;
    background: #fef2f2;
    border: 1px solid #fc8181;
    padding: 12px 16px;
    border-radius: 8px;
  }

  /* 填空题样式 */
  .blank-question-container {
    margin: 24px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
  }

  .blank-input {
    display: inline-block;
    min-width: 120px;
    padding: 8px 12px;
    margin: 0 4px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    background: white;
    transition: all 0.3s ease;
    outline: none;
  }

  .blank-input:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
  }

  .blank-input.correct {
    border-color: #68d391;
    background: #f0fff4;
    color: #22543d;
  }

  .blank-input.wrong {
    border-color: #fc8181;
    background: #fef2f2;
    color: #c53030;
  }

  .blank-input:disabled {
    background: #f7fafc;
    cursor: not-allowed;
  }

  /* 引用样式 */
  blockquote {
    padding: 16px 20px;
    color: #4a5568;
    background: #f7fafc;
    border-left: 4px solid #3182ce;
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
  }

  /* 代码块包装器 */
  .code-block-wrapper {
    margin: 1.5em 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #2d3748;
  }

  .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #1a202c;
    border-bottom: 1px solid #4a5568;
  }

  .code-language {
    font-size: 12px;
    font-weight: 600;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .copy-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #4a5568;
    color: #a0aec0;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .copy-button:hover {
    background: #2d3748;
    border-color: #718096;
    color: #ffffff;
  }

  .copy-button svg {
    width: 14px;
    height: 14px;
  }

  /* 重写 Prism.js 样式 */
  pre[class*="language-"] {
    margin: 0;
    padding: 20px;
    background: #2d3748 !important;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
  }

  code[class*="language-"] {
    font-family:
            "Fira Code", "JetBrains Mono", "Cascadia Code", "SF Mono", Monaco,
            "Roboto Mono", Menlo, monospace !important;
    font-size: 14px;
    color: #e2e8f0;
  }

  /* 行号样式 */
  .line-numbers .line-numbers-rows {
    border-right: 1px solid #4a5568;
    background: #1a202c;
  }

  .line-numbers-rows > span:before {
    color: #718096;
  }

  /* Token 颜色优化 */
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #718096;
    font-style: italic;
  }

  .token.punctuation {
    color: #e2e8f0;
  }

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #f56565;
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: #68d391;
  }

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: #4fd1c7;
  }

  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: #9f7aea;
  }

  .token.function,
  .token.class-name {
    color: #f6e05e;
  }

  .token.regex,
  .token.important,
  .token.variable {
    color: #ed8936;
  }

  /* 行内代码样式 */
  code:not([class*="language-"]) {
    font-family:
            "Fira Code", "JetBrains Mono", "Cascadia Code", "SF Mono", Monaco,
            "Roboto Mono", Menlo, monospace;
    font-size: 0.875em;
    background: #edf2f7;
    color: #e53e3e;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }

  /* 链接样式 */
  a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  a:hover {
    color: #2c5aa0;
    text-decoration: underline;
  }

  /* 强调和斜体 */
  strong {
    font-weight: 700;
    color: #2d3748;
  }

  em {
    font-style: italic;
    color: #4a5568;
  }

  /* 图片样式 */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: zoom-in;
    transition: transform 0.2s ease;
  }

  img:hover {
    transform: scale(1.02);
  }

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  th,
  td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
  }

  th {
    font-weight: 600;
    background: #f8fafc;
    color: #2d3748;
    border-bottom: 2px solid #e2e8f0;
  }

  tr:hover {
    background: #f8fafc;
  }

  /* 分隔线 */
  hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #e2e8f0, #cbd5e0, #e2e8f0);
    margin: 2em 0;
    border-radius: 1px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-preview {
    padding: 12px;
  }

  .preview-container {
    font-size: 15px;
    .code-block-header {
      padding: 8px 12px;
    }

    .copy-button {
      padding: 4px 8px;
      font-size: 11px;
    }

    pre[class*="language-"] {
      padding: 16px 12px;
      font-size: 13px;
    }

    h1 {
      font-size: 1.875em;
    }

    h2 {
      font-size: 1.5em;
    }

    ul li {
      padding: 8px 12px;
    }

    .quiz-container {
      padding: 16px;
    }

    .quiz-option {
      padding: 12px 16px;
    }

    .option-letter {
      width: 28px;
      height: 28px;
      font-size: 12px;
    }

    .option-text {
      font-size: 14px;
    }

    .blank-question-container {
      padding: 16px;
    }

    .blank-input {
      min-width: 100px;
      padding: 6px 10px;
      font-size: 15px;
    }
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .markdown-preview {
    background: #fff;
  }

  .preview-container  {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      //color: #f7fafc;
    }

    code:not([class*="language-"]) {
      background: #2d3748;
      color: #f56565;
    }

    blockquote {
      background: #2d3748;
      color: #cbd5e0;
    }

    ul li {
      background: #2d3748;
      border-left-color: #4a5568;
    }

    ul li:hover {
      background: #374151;
      border-left-color: #3182ce;
    }

    table {
      background: #2d3748;
    }

    th {
      background: #1a202c;
      color: #f7fafc;
    }

    tr:hover {
      background: #374151;
    }

    .quiz-container {
      background: #2d3748;
      border-color: #4a5568;
    }

    .quiz-option {
      background: #1a202c;
      border-color: #4a5568;
      color: #e2e8f0;
    }

    .quiz-option:hover {
      border-color: #3182ce;
    }
  }
}
